<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset="GBK">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="//at.alicdn.com/t/c/font_3568373_nydbx9itwrr.js"></script>

    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: rgb(100, 100, 100);
            background-size: 1300px;
        }
        #search-div{
            height: 40px;
            background-color: rgb(255, 255, 255);
            width: 44%;
            margin:200px auto;
            /*border: 2px solid black;*/
            min-width: 600px;
            border-radius: 10px;
        }
        #search-div:hover{
            /*box-shadow:0 1px 2px 2px rgb(193,193,193);*/
            border: 1px solid black;

        }
        #search{
            height: 90%;
            width: 85%;
            border: none;
            outline: none;
            /* opacity: 0; */
            font-size: 14px;
            margin-left: 30px;
        }

        /* 切换背景 */
        #background{
            /* display: inline-block; */
            width: 70px;
            margin-left: 90%;
            margin-top: 30px;
            /* border: 2px solid rgb(133, 132, 132); */
            background-color:rgba(0, 0, 0, 0) ;
            color: rgb(2, 2, 2);
            cursor: pointer;
        }
        #picture{
            width: 25px;
            height: 35px;
        }
        #change-back span{
            float: right;
        }
        #search-btn{
            width:35px;

            cursor: pointer;
            /*margin-right: 8px;*/
            height: 30px;
           /*margin-top: 10px;*/
            border: none;
            outline: none;
            background-color: white;
            font-size: 14px;
            border-radius: 10px;
        }
        #btn{
            width: 30px;
            height: 35px;
        }
        #search,#search-btn{
            float: left;
        }
    </style>
</head>
<body>
    <div id="background">
        <svg class="icon" aria-hidden="true" id="picture">
            <use xlink:href="#icon-kaipingheji"></use>
        </svg>
    </div>


<div id="search-div">
    <input type="text" name="word" id="search" placeholder="您可以输入关键词或者网址">
    <div id="search-btn">
        <svg class="icon" aria-hidden="true" id="btn">
            <use xlink:href="#icon-sousuo"></use>
        </svg>
    </div>

</div>

</body>
<script>
    $(function (){
        //随机加载背景图
        var imgArr = [
            'https://img0.baidu.com/it/u=3588455614,2766397860&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-baofun.zhhainiao.com%2Ffs%2F54e1dc2fb96b336d577039119a3afb58.jpg&refer=http%3A%2F%2Fimg-baofun.zhhainiao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669109245&t=111899c0ae7b3d51c47c4ebe8e09a39b',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2019-09-09%2F5d75f2e83628d.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669109245&t=65419a83bc48ad76821ce61ce12ca2ad',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F54a24b4083caf.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669391436&t=9c32ce86389bae8e73e2f89271a5ddc8',
            'https://img1.baidu.com/it/u=1510497170,739580478&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd.zdqx.com%2Fdhsc_180125%2F009.jpg&refer=http%3A%2F%2Fd.zdqx.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669391591&t=81ad7a708b2e209386699500b7bf5b0f',
            'https://t7.baidu.com/it/u=1871347157,3677968557&fm=193&f=GIF',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F59a68891160b2.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669391699&t=1cb12f5e48a6796e8bea7bc48084c019',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F542a1e52d13c0.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669391727&t=cd8c03a2a52101b802df51543fac499e',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2010-5-10%2Fenterdesk.com-4052BF8C347566213E9D3D6C1B864759.png&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669391436&t=ec42ea7610e2951dba2b724265db00a3'
        ]
        // var n1=Math.floor(Math.random()*10+1);//输出1～10之间的随机整数
        var n2=parseInt(10*Math.random());//输出0～10之间的随机整数

        $('body').css('background-image', 'url('+imgArr[n2]+')');


        $('#search').focus(function(){
            $(this).attr('placeholder',' ')
        })
        $('#search').blur(function(){
            $(this).attr('placeholder','您可以输入关键词或者网址')
        })
        //切换背景图片
        $('#background').click(function(){
            // alert('1')
            var n2=parseInt(10*Math.random());//输出0～10之间的随机整数
            $('body').css('background-image', 'url('+imgArr[n2]+')');
        })
        //重新生成随机数

        // 获取input输入发送给后台
        $('#search-btn').click(function(){
            var text = $('#search').val()
            console.log(text)
            var word=text
            text1 = encodeURIComponent(text,true)
            console.log(text1)
            $.ajax({
                url:'http://192.168.144.98:8080/sp',
                data:text,
                type:'GET',
                async:false,
                success:function(data,status,xhr){
                    //这个就是啊xhr
                    console.log(xhr)
                    if(data){
                        // window.open(`http://192.168.144.98:8080/sp?${word}`)
                        window.location.replace(`http://192.168.144.98:8080/sp?${word}`);

                        console.log('success')
                        // console.log(xhr.getAllResponseHeaders())
                        // var word = xhr.getResponseHeader('word')
                        // console.log(word)
                        // console.log(decodeURI(word))
                        // console.log(unescape.word)
                        // console.log(str)
                    }
                },
                error:function(){
                    console.log('请求失败！')
                }
            })
        })
    })

</script>
</html>